<template>
<div class="wallet">
    <el-row :gutter="20">
        <el-col :md="12" :xs="24">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>账户</span>
                    </div>
                </template>
                <div class="recharge">
                    <span class="money">{{userInfo.money}}</span>
                    <el-button type="primary" @click="onRecharge">充值</el-button>
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 20px;">
                <template #header>
                    <div class="card-header">
                        <span>购买订单</span>
                    </div>
                </template>
                <div>
                    <el-table :data="tableData" border stripe style="width: 100%">
                        <el-table-column prop="date" label="编号" width="180" />
                        <el-table-column prop="name" label="备注" width="180" />
                        <el-table-column prop="address" label="时间" />
                    </el-table>
                </div>
            </el-card>
        </el-col>
        <el-col :md="12" :xs="24">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>卡密兑换</span>
                    </div>
                </template>
                <div>
                    <el-form label-position="top" :model="state.form_kami">
                        <el-form-item>
                            <el-col :span="20">
                                <el-input v-model="state.form_kami.code" placeholder="请填写卡密信息"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-button type="primary" @click="onKami">兑换</el-button>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 20px;">
                <template #header>
                    <div class="card-header">
                        <span>消费记录</span>
                    </div>
                </template>
                <div>
                    <el-table :data="state.data" border stripe style="width: 100%">
                        <el-table-column prop="id" label="编号" width="180" />
                        <el-table-column prop="money" label="金额" width="180" />
                        <el-table-column prop="memo" label="备注" width="180" />
                        <el-table-column label="时间">
                            <template #default="{row}">
                                <span>{{timeFormat(row.create_time * 1000)}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <userRecharge :visible="state.recharge_show"/>
</div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { getBalanceLog } from '/@/api/frontend/user/index'
import {timeFormat} from "/@/utils/common";
import { recharge_kami } from '/@/api/frontend/chat/user'
import { ElMessage } from 'element-plus'
import {useUserInfo} from "/@/stores/userInfo";
import userRecharge from "/@/layouts/frontend/components/chat/users/recharge.vue";

const userInfo = useUserInfo()

const state: {
    recharge_show: boolean
    form: any
    form_kami: any
    data: any
    currentPage: number
    total: number
    pageSize: number
    pageLoading: boolean
} = reactive({
    recharge_show: false,
    form: {
        money: '1.00',
        pay_type: 'alipay'
    },
    form_kami: {
        code: ''
    },
    data: [],
    currentPage: 1,
    total: 0,
    pageSize: 10,
    pageLoading: true,
})

// onRecharge
const loadData = () => {
    getBalanceLog(state.currentPage, state.pageSize).then((res) => {
        state.pageLoading = false
        state.data = res.data.list
        state.total = res.data.total
    })
}

onMounted(() => {
    loadData()
})
const tableData = [{}]

const onKami = () => {
    if (!state.form_kami.code) {
        ElMessage.warning('请输入卡密')
        return
    }
    recharge_kami(state.form_kami).then((res) => {
        if (res.code === 1) {
            state.form_kami.code = ''
            ElMessage.success(res.msg)
            userInfo.money = res.data.money
            loadData()
        }
    })
}
const onRecharge = () => {
    state.recharge_show = !state.recharge_show
}
</script>

<style scoped lang="scss">
.wallet {
    padding: 2px;
    .recharge {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        .money {
            font-size: 28px;
        }
    }
    .box-card {
        margin-bottom: 20px;
    }
}
</style>
